import * as echarts from 'echarts';
import { onMounted, watch, computed, watchEffect } from 'vue';

const Comp = (props: any) => {
  const { id, data, key } = props;
  watchEffect(
    () => {
      const myChart = echarts.init(document.getElementById(id) as any);
      const _data = data[key]
      if (_data) {
        const option = {
          grid: {
            left: 40,
            top: 30,
            right: 20,
            bottom: 55,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          legend: {
            bottom: 5,
            left: "center",
        },
          xAxis: {
            type: 'category',
            data: _data.xaxisList,
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#215570',
                type: [5, 10],
                dashOffset: 5,
              },
            },
          },
          series: _data.yaxisList.map((item) => {
            return {
              name: item.name,
              type: 'bar',
              data: item.data,
              stack: 'a'
            }
          })
        };
        myChart.setOption(option);
      }
    
      window.addEventListener('resize', () => {
        myChart?.resize();
      });
    },
    {
      flush: 'post',
    },
  );
};

export default Comp;
